<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">

	<title>Title test page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta charset="utf-8">


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<link rel="stylesheet" type="text/css" href="./styles/Title.css">
</head>

<body class="title1auto">
	<section>
		<ui5-title id="titleH1" level="H1">Title Size 1</ui5-title>
		<ui5-title>Title Size Auto (2)</ui5-title>
		<ui5-title id="titleH2" level="H2">Title Size 2</ui5-title>
		<ui5-title id="titleH3" level="H3">Title Size 3</ui5-title>
		<ui5-title id="titleH4" level="H4">Title Size 4</ui5-title>
		<ui5-title id="titleH5" level="H5">Title Size 5</ui5-title>
		<ui5-title id="titleH6" level="H6">Title Size 6</ui5-title>
		<ui5-title level="H2">A Very Long Long Long Long Title Text with Level Two</ui5-title>
		<br>
		<ui5-title size="H1">Title Style 1</ui5-title>
		<ui5-title size="H2">Title Style 2</ui5-title>
		<ui5-title size="H3">Title Style 3</ui5-title>
		<ui5-title size="H4">Title Style 4</ui5-title>
		<ui5-title>Title Style Auto (5)</ui5-title>
		<ui5-title size="H5">Title Style 5</ui5-title>
		<ui5-title size="H6">Title Style 6</ui5-title>
	</section>

	<section class="wrapping">
		<h2>Wrapping</h2>
		<ui5-title size="H6" level="H6" id="wrapping-title">Wrapping Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
		<ui5-title size="H6" level="H6" id="truncated-title" wrapping-type="None">Truncated Title Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-title>
	</section>

	<section>
		<h2>Usage With ui5-link</h2>
		<ui5-title level="H3">
			<ui5-link design="Default">With Default Link (57)</ui5-link>
		</ui5-title>
		<ui5-title level="H3">
			<ui5-link design="Emphasized">With Emphasized Link (58)</ui5-link>
		</ui5-title>
		<ui5-title level="H3">
			<ui5-link design="Subtle">With Subtle Link (59)</ui5-link>
		</ui5-title>
		<div class="wrapping">
			<h2>Wrapping With Link</h2>
			<ui5-title level="H6">
				<ui5-link design="Default">Wrapping With Link (60) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
			</ui5-title>
			<ui5-title level="H6" wrapping-type="None">
				<ui5-link design="Default">Truncated With Link (61) Lorem Ipsum Dolor, Sit Amet Consectetur Adipisicing Elit. Numquam, Ab.</ui5-link>
			</ui5-title>
		</div>
	</section>
</body>
</html>